<template>
  <modal :modalOptions="modalOptions" ref="dialog">
    <h4 slot="header">{{modalOptions.title}}</h4>
    <div slot="body">
      <form name="login" class="login">
        <div class="phoneOrEmail" v-show="isLoginType===isPhoneLogin||isLoginType===isEmailLogin">
          <div class="username">
            <label for="username"></label>
            <input id="username" type="text" initial="off"  placeholder="请输入账号" v-model="loginInfo.phone">
          </div>
          <div class="password">
            <label for="password"></label>
            <input type="password" id="password" initial="off"  placeholder="请输入密码" v-model="loginInfo.password">
          </div>
          <div class="errMsg" v-show="showErrMsg">
            <span>{{errMsg}}</span>
          </div>
          <div class="autoLogin clearfloat">
            <label for="autoLogin" class="floatLeft">
              <input type="checkbox" id="autoLogin" value="自动登录" class="floatLeft" checked>自动登录
            </label>
            <a href="javascript:void(0)" class="floatRight">忘记密码？</a>
          </div>
          <div>
            <button type="button" class="submit" @click="logIn()">登录</button>
          </div>
        </div>
        <div class="all clearfloat" v-show="isLoginType===isOnLogin">
          <div class="left">
            <img src="src/components/loginModal/platform.png" alt="">
            <button  type="button" class="loginButton" @click="loginType(isPhoneLogin)">手机号登录</button>
            <button  type="button" class="registerButton">注册</button>
          </div>
          <div class="rightItem floatLeft">
            <ul>
              <li>
                <span></span>
                <a href="">微信登录</a>
              </li>
              <li>
                <span></span>
                <a href="">QQ登录</a>
              </li>
              <li>
                <span></span>
                <a href="">微博登录</a>
              </li>
              <li>
                <span></span>
                <a href="javascript:void(0)" @click="loginType(isEmailLogin)">网易邮箱账号登录</a>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>
    <div slot="button" class="loginFooter" v-show="isLoginType===isPhoneLogin||isLoginType===isEmailLogin">
      <a href="javascript:void(0)" @click="loginType(isOnLogin)">< 其他登录方式</a>
      <a href="javascript:void(0)" class="floatRight">没有账号？免费注册 ></a>
    </div>
  </modal>
</template>

<script type="text/ecmascript-6">
  import modal from '../modal/modal.vue'
  import {setCookie} from '@/utils/util'
  const ERROk = 200
  export default{
    data() {
      return {
        modalOptions: {
          title: '登录',
          showCancelButton: false,
          showConfirmButton: false
        },
        isLoginType: 0,
        isOnLogin: 0,
        isPhoneLogin: 1,
        isEmailLogin: 2,
        loginInfo: {},
        showErrMsg: true,
        errMsg: '',
        userInfo: {}
      }
    },
    methods: {
      confirmLogin () {
        this.$refs.dialog.confirm().then(() => {
          // 点击确定按钮的回调处理
        //  callback();
          this.$refs.dialog.show = false
        }).catch(() => {
          // 点击取消按钮的回调处理
         // callback();
        })
      },
      loginType(type) {
        this.isLoginType = type
      },
      logIn() {
        this.$ajax.get(`/login/cellphone?phone=${this.loginInfo.phone}&password=${this.loginInfo.password}`).then((response) => {
          if (response.data.code === ERROk) {
            console.log(response)
            this.userInfo = response.data
            this.$refs.dialog.submit()
            this.$parent.isLogin = true
            this.$parent.avatar = response.data.profile.avatarUrl
            let expireDays = 1000 * 60 * 60
            setCookie('token', response.data.bindings[1].tokenJsonStr, expireDays)
            setCookie('profile', response.data.profile, expireDays)
            setCookie('name', this.loginInfo.phone, expireDays)
            setCookie('password', this.loginInfo.password, expireDays)
            this.errMsg = ''
          } else {
            this.errMsg = '账号或密码错误'
          }
        })
      }
    },
    components: {
      modal
    }
  }
</script>

<style>
  form.login{
    margin: 0 auto;
    padding: 30px 0 40px;
    text-align: center;
  }
  form.login input{
    width: 206px;
    height: 19px;
    margin: 0;
    padding: 5px 6px 6px;
    border: 1px solid #cdcdcd;
    border-radius: 2px;
    line-height: 19px;
  }
  form.login #autoLogin{
    width: 13px;
    height: 13px;
    margin-right: 8px;
  }
  form.login .autoLogin{
    width: 220px;
    margin: 0 auto 20px;
    font-size: 12px;
  }
  .errMsg{
    width: 220px;
    margin: 0 auto;
    text-align: left;
    color: #e33232;
    font-size: 12px;
  }
  form.login .autoLogin a{
    color: #666;
  }
  form.login .phoneOrEmail>div{
    margin-bottom: 10px;
  }
  form.login .submit{
    width: 220px;
    border-radius: 4px;
    height: 31px;
    line-height: 31px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #3787D2;
    background: #3787D2;
    transition: background .3s linear;
  }
  form.login .submit:hover{
    background: #4691D7;
  }
  .loginFooter{
    height: 48px;
    line-height: 48px;
    padding: 0 19px;
    border-top: 1px solid #c6c6c6;
    border-radius: 0 0 4px 4px;
    background-color: #f7f7f7;
    font-size: 12px;
  }
  .loginFooter a:first-child{
    color: #0c72c3;
  }
  .loginFooter a:last-child{
    color: #999;
  }
  .all .left{
    float: left;
    width: 224px;
    padding: 0 35px 3px 40px;
    border-right: 1px dotted #ccc;
  }
  .all .left button{
    display: inline-block;
    width: 224px;
    border-radius: 4px;
    height: 31px;
    line-height: 31px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    margin-top: 10px;
  }
  .all .left button.loginButton{
    border: 1px solid #3787D2;
    background: #3787D2;
  }
  .all .left button.registerButton{
    border: 1px solid #ccc;
    background: #ccc;
  }
  .rightItem li{
    text-align: left;
  }
  .rightItem{
    padding-left: 39px;
  }
  .rightItem a{
    color: #333;
  }
</style>
